<template>
  <div class="app-main-container">
    <div class="app-main-title">财务结算</div>
    <div class="statistics-header">
      <div class="statistics-items flex-c">
        <div class="statistics-title">按收入方式统计</div>
        <div ref="incomeWays" class="chart-area-booking" />
      </div>
      <div class="statistics-items flex-c">
        <div class="statistics-title">按收款方式统计</div>
        <div ref="paymentTerm" class="chart-area-booking" />
      </div>
      <div class="statistics-items">
        <div class="statistics-title">营业结算</div>
        <div class="message-form">
          <div class="name-style">
            <div class="messag-title">场馆名称</div>
            <span>{{ vName }}</span>
          </div>
        </div>
        <div class="message-form">
          <div class="name-style">
            <div class="messag-title">结算日期</div>
            <el-date-picker
              v-model="date"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd hh:mm:ss"
              :picker-options="pickerOptions"
              @change="initData"
            />
          </div>
        </div>
        <div class="message-form">
          <div class="name-style">
            <div class="messag-title">现金结算金额</div>
            <div class="input">
              <el-input v-model="dayMoney" disabled />
              <div class="money-tip">当日实收现金总额</div>
            </div>
          </div>
        </div>
        <div class="message-form">
          <div class="name-style">
            <div class="messag-title">结算备注</div>
            <el-input v-model="mark" class="input" placeholder="请输入结算备注" />
            <!-- <span>{{ vName }}</span> -->
          </div>
        </div>
        <div class="button-box">
          <button v-if="meta.indexOf('FinanceSettlementAdd') > -1" v-preventReClick class="settle-btn" @click="settleAction">确认结算</button>
        </div>
      </div>
    </div>
    <div class="summary-sheet">营业分类汇总</div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="settleList"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" label="收入方式" prop="statuName" width="210" />
      <el-table-column align="center" label="会员卡" prop="memberCard" width="210" />
      <el-table-column align="center" label="支付宝" prop="aliPay" width="210" />
      <el-table-column align="center" label="微信" prop="wxPay" width="210" />
      <el-table-column align="center" label="现金" prop="cash" width="210" />
      <el-table-column align="center" label="转账" prop="transfer" width="210" />
      <el-table-column align="center" label="总额" prop="allMoney" width="210" />
    </el-table>
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { PieChart, BarChart } from 'echarts/charts'
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components'
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  PieChart,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent
])
import { financeCount, settlement } from '@/api'
import { parseTime } from '@/utils'

export default {
  data() {
    return {
      meta: [],
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() > new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      vLog: sessionStorage.getItem('logo'),
      vName: sessionStorage.getItem('name'),
      date: parseTime(new Date()),
      dayMoney: 1000,
      mark: null,
      benchInfo: {},
      settleList: [
      ],
      incomeMethod: [],
      paymentMethod: [],
      listLoading: true
      // （66合计 01开卡充值02场地售卖03门票售卖04套餐收入06商品收入07课程报名08活动报名72通用消费）")
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
  },
  mounted() {
    this.initData()
    // this.renderIncome()
    // this.renderPaymentTerm()
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    settleAction() {
      settlement({
        param: { settlementDate: this.date, venueId: sessionStorage.getItem('venueId'), settlementInfo: this.mark }
      }).then(res => {

      })
    },
    initData() {
      console.log(this.date)
      financeCount({ param: { settlementDate: this.date, venueId: sessionStorage.getItem('venueId') }}).then(res => {
        // console.log(res)
        this.listLoading = false
        this.incomeMethod = []
        Object.keys(res.record.incomeMethod).forEach((key) => {
          const value = parseFloat(res.record.incomeMethod[key])
          this.incomeMethod.push({ value: value, name: key + '：' + value })
        })
        console.log('this.incomeMethod', this.incomeMethod)
        this.paymentMethod = []
        Object.keys(res.record.paymentMethod).forEach((key) => {
          const value = parseFloat(res.record.paymentMethod[key])
          this.paymentMethod.push({ value: value, name: key + '：' + value })
        })
        console.log('this.paymentMethod', this.paymentMethod)
        this.settleList = []
        let lastItem
        for (const item of res.record.list) {
          if (item.status === '66') {
            lastItem = item
            this.dayMoney = item.allMoney
            console.log(this.dayMoney)
          } else {
            this.settleList.push(item)
          }
        }
        this.settleList.push(lastItem)
        this.renderIncome()
        this.renderPaymentTerm()
      })
    },
    renderIncome() {
      const that = this
      // console.log('renderIncome', that.dayMoney)
      const chartAreaBooking = echarts.init(this.$refs.incomeWays)
      chartAreaBooking.setOption({
        title: {
          text: that.dayMoney,
          left: '105',
          top: '160',
          textStyle: {
            color: '#ff00ff',
            fontWeight: 'bolder',
            fontSize: 30,
            width: 150,
            overflow: 'truncate',
            ellipsis: '...'
          },
          textAlign: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'center',
          right: '0',
          orient: 'vertical'
        },
        series: [
          {
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['110', '180'],
            avoidLabelOverlap: false,
            label: { show: false },
            labelLine: { show: false },
            data: that.incomeMethod
          }
        ]
      })
    },
    renderPaymentTerm() {
      const that = this
      // console.log('renderPaymentTerm', that.dayMoney)
      const chartAreaBooking = echarts.init(this.$refs.paymentTerm)
      chartAreaBooking.setOption({
        title: {
          text: that.dayMoney,
          left: '105',
          top: '160',
          textStyle: {
            color: '#ff00ff',
            fontWeight: 'bolder',
            fontSize: 30,
            width: 150,
            overflow: 'truncate',
            ellipsis: '...'
          },
          textAlign: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'center',
          right: '0',
          orient: 'vertical'
        },
        series: [
          {
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['110', '180'],
            avoidLabelOverlap: false,
            label: { show: false },
            labelLine: { show: false },
            // data: [
            //   { value: Number(this.benchInfo.fixedDuration), name: '固定场地：' + Number(this.benchInfo.fixedDuration) + '小时' },
            //   { value: Number(this.benchInfo.pcDuration), name: '前台预定：' + Number(this.benchInfo.pcDuration) + '小时' },
            //   { value: Number(this.benchInfo.appDuration), name: '网络预定：' + Number(this.benchInfo.appDuration) + '小时' }
            // ]
            data: that.paymentMethod
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  .statistics-items {
    // background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 300px;
    border: solid 1px #55a3e2;
    width: calc((100% - 40px) / 3);
    .chart-area-booking {
      flex: 1;
      height: 300px;
      width: 100%;
      margin: -25px 0;
      display: flex;
      align-items: center;
    }
    .statistics-title {
      padding-left: 10px;
      background-color: #55a3e2;
      color: white;
      line-height: 30px;
      font-weight: 600;
      height: 30px;
      width: 100%;
    }
  }
  .button-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
    button {
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 3px 8px;
      font-size: 12px;
    }
    .settle-btn {
      background: #55a3e2;
    }
    .print-btn {
      margin-left: 15px;
      background-color: rgb(232, 158, 66);
    }
  }
}
.message-form {
  width: 100%;
  margin-top: 15px;
  .name-style {
    display: flex;
    align-items: center;
    .messag-title {
      display: inline-block;
      width: 100px;
      text-align: right;
      margin-right: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #666;
    }
    .input {
      width: calc(100% - 130px);
      .money-tip {
        margin-top: 5px;
        color: #e03529;
        font-size: 12px;
        border-width: 600;
      }
    }
    .image-placehold {
      max-width: 60px;
      height: 30px;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      margin-right: 5px;
    }
    span {
      font-size: 14px;
    }
  }
}
.summary-sheet {
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  color: #333;
}
</style>
